<template>
  <view class="test-container">
    <view class="test-item">
      <text class="label">测试输入框:</text>
      <input 
        type="text"
        class="input" 
        placeholder="请输入内容"
        placeholder-class="input-placeholder"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  }
}
</script>

<style scoped>
.test-container {
  padding: 20rpx;
}

.test-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 15rpx;
}

.label {
  display: flex;
  width: 120rpx;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-right: 20rpx;
}

.input {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-size: 32rpx;
  color: #666;
  font-weight: 500;
  flex: 1;
  text-align: right !important;
  text-align: end !important;
  margin-right: 20rpx;
  -webkit-appearance: none;
  -webkit-transform: translateZ(0px);
  -webkit-user-select: auto !important;
}

.input-placeholder {
  text-align: right !important;
  text-align: end !important;
  color: #999;
  font-weight: 500;
  font-size: 32rpx;
}
</style>